<template>
  <div id="app">
    <div id="captcha"></div>
      <router-view></router-view>
  </div>
</template>
<script>
import { checkHeart } from '@/utils/checkHeart'
import md5 from "js-md5";
import {decrypt} from "@/utils";
export default {
  data() {
    return {
      transitionName: "",
      timerr: null,
    };
  },
  watch: {
    $route(to, from) {
      const { index: toIndex } = to.meta;
      const { index: fromIndex } = from.meta;
      this.transitionName =
        toIndex < fromIndex ? "slide-right" : "slide-left";
    },
  },
  methods: {
    setTimerr(){
      this.timerr = setInterval(()=>{
        checkHeart(this.done);
      },60000)
    },
  },
  beforeDestroy() {
    clearInterval(this.timerr)
    this.timerr = null
  },
  mounted () {
  },
};
</script>

<style lang="scss" scoped>
#app {
  /deep/ {
    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
      width: 100vw;
      will-change: transform;
      transition: all 750ms;
      position: absolute;
    }
    .slide-right-enter {
      opacity: 1;
      transform: translate3d(-100%, 0, 0);
    }
    .slide-right-leave-active {
      opacity: 1;
      transform: translate3d(100%, 0, 0);
    }
    .slide-left-enter {
      opacity: 1;
      transform: translate3d(100%, 0, 0);
    }
    .slide-left-leave-active {
      opacity: 1;
      transform: translate3d(-100%, 0, 0);
    }


    // fade动画
    .slide-fade-enter-to {
      opacity: 1;
    }
    .slide-fade-enter-active {
      transition: all 300ms ease;
    }
    .slide-fade-leave-active {
      transition: all 300ms ease;
    }
    .slide-fade-enter,
    .slide-fade-leave-to {
      transform: translateX(15px);
      opacity: 0;
    }
  }
}
</style>
<style>
  .van-toast{
    width: auto !important;
  }
</style>
